<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- Home组件的同步加载 -->
        <Home></Home>
        <hr/>
        <!-- Home组件的异步加载 -->
        <asynchome></asynchome>
    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>

    const {createApp,defineAsyncComponent} = Vue;

    // Home组件
    const Home = {
                    template:`<div>Home组件</div>`
                }

    // Home组件做异步加载
    const AsyncCom = defineAsyncComponent(()=>{
        return new Promise(function(resolve,reject){
            setTimeout(function(){
                resolve(Home);
            },2000);
        })
    })   

    let app = createApp({
        components:{
            Home,
            asynchome:AsyncCom
        },
        data(){
            return {
                
            }
        }      
    });

    app.mount("#app");


</script>